<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item"
        type="success" icon="el-icon-plus"
        @click="onSave">
        保存配置
      </el-button>
    </div>

    <el-form :inline="false" :model="form" :rules="rules" ref="form" >
      <el-form-item prop="channelLen">
        <el-input
          v-model.number="form.channelLen"
          tabindex="1"
          style="width: 300px;"
          >
          <template slot="prepend">
            <div style="width: 80px;text-align:right;">通道长度</div>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="snLen">
        <el-input
          v-model.number="form.snLen"
          tabindex="2"
          style="width: 300px;"
          >
          <template slot="prepend">
            <div style="width: 80px;text-align:right;">SN长度</div>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="modelStart">
        <el-input
          v-model.number="form.modelStart"
          tabindex="3"
          style="width: 300px;"
          >
          <template slot="prepend">
            <div style="width: 80px;text-align:right;">型号起始位</div>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="modelLen">
        <el-input
          v-model.number="form.modelLen"
          tabindex="4"
          style="width: 300px;"
          >
          <template slot="prepend">
            <div style="width: 80px;text-align:right;">型号长度</div>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="modelTime">
        <el-input
          v-model.number="form.modelTime"
          tabindex="5"
          placeholder="分钟"
          style="width: 300px;"
        >
          <template slot="prepend">
            <div style="width: 80px;text-align:right;">错误检测间隔</div>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="tprUpper">
        <el-input
          v-model.number="form.tprUpper"
          tabindex="6"
          placeholder="摄氏度"
          style="width: 300px;"
        >
          <template slot="prepend">
            <div style="width: 120px;text-align:right;">老化房温度报警上限</div>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="cabinetTprUpper">
        <el-input
          v-model.number="form.cabinetTprUpper"
          tabindex="7"
          placeholder="摄氏度"
          style="width: 300px;"
        >
          <template slot="prepend">
            <div style="width: 120px;text-align:right;">电源柜温度报警上限</div>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="报警开关">
        <span style="display: inline-block;width: 120px;text-align:right;">报警设置：</span>
        <el-radio-group v-model="form.isAlarmOn" style="width: 300px;">
          <el-radio-button label="1">打开</el-radio-button>
          <el-radio-button label="2">关闭</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  findAllSysConfigs,
  updateSysConfigs
} from '@/api/config'

const CONFIGS = [
  { name: 'error_check_time', value: 5, remark: '错误检测时间' },
  { name: 'channel_len', value: 5, remark: '通道长度' }
]

export default {
  name: 'SysConfigs',
  data() {
    return {
      form: {
        channelLen: 5,
        snLen: 15,
        modelStart: 3,
        modelLen: 4,
        modelTime: 5,
        isAlarmOn: 1,
        tprUpper: 40,
        cabinetTprUpper: 40,
      },
      rules: {
        channelLen: [
          {required: true, message: '请输入通道长度', trigger: 'blur'},
          { type: 'number', message: '必须为数字值'}
        ],
        snLen: [
          {required: true, message: '请输入SN长度', trigger: 'blur'},
          { type: 'number', message: '必须为数字值'}
        ],
        modelStart: [
          {required: true, message: '请输入型号起始位', trigger: 'blur'},
          { type: 'number', message: '必须为数字值'}
        ],
        modelLen: [
          {required: true, message: '请输入型号长度', trigger: 'blur'},
          { type: 'number', message: '必须为数字值'}
        ],
        modelTime: [
          {required: true, message: '请输入检测时间', trigger: 'blur'},
          { type: 'number', message: '必须为数字值'}
        ],
        tprUpper: [
          {required: true, message: '请输入老化房温度报警上限', trigger: 'blur'},
          { type: 'number', message: '必须为数字值'}
        ],
        cabinetTprUpper: [
          {required: true, message: '请输入电源柜温度报警上限', trigger: 'blur'},
          { type: 'number', message: '必须为数字值'}
        ],
      }
    }
  },
  created() {
    this.fetchConfigs();
  },
  methods: {
    fetchConfigs() {
      findAllSysConfigs().then(res => {
        let configs = res.data.data

        if (configs && configs.length) {
          configs.forEach(c => {
            if (c.name == 'error_check_time') {
              this.form.modelTime = Number(c.value)
            }

            if (c.name == 'is_alarm_on') {
              this.form.isAlarmOn = Number(c.value)
            }

            if (c.name == 'tpr_upper') {
              this.form.tprUpper = Number(c.value)
            }

            if (c.name == 'cabinet_tpr_upper') {
              this.form.cabinetTprUpper = Number(c.value)
            }

            if (c.name == 'model_start') {
              this.form.modelStart = Number(c.value)
            }

            if (c.name == 'model_len') {
              this.form.modelLen = Number(c.value)
            }
          })
        }
      })
    },

    onSave() {
      this.$refs['form'].validate((valid) => {
        if (!valid) return false

        // 目前只保存错误检测时间
        let configs = []
        configs.push({
          name: 'error_check_time',
          value: this.form.modelTime,
          remark: '错误检测时间'
        })

        configs.push({
          name: 'is_alarm_on',
          value: this.form.isAlarmOn,
          remark: '是否开启报警，1：开启 2：关闭'
        })

        configs.push({
          name: 'tpr_upper',
          value: this.form.tprUpper,
          remark: '温度报警上限'
        })

        configs.push({
          name: 'cabinet_tpr_upper',
          value: this.form.cabinetTprUpper,
          remark: '温度报警上限'
        })

        configs.push({
          name: 'model_start',
          value: this.form.modelStart,
          remark: '型号起始位'
        })

        configs.push({
          name: 'model_len',
          value: this.form.modelLen,
          remark: '型号长度'
        })

        updateSysConfigs(configs).then(res => {
          this.$message({
            message: '配置保存成功',
            type: 'success'
          });

          this.fetchConfigs()
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
